<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../../res/layui/css/layui.css">
  <link rel="stylesheet" href="../../res/css/global.css">
  <link rel="stylesheet" href="./detail.css">
</head>

<body>
  <style>
    #weiqidom {
      height: 600px;
      width: 600px;
    }

    html body {
      margin-top: 0;
    }

    .title-chessman {
      display: flex;
      justify-content: space-around;
      font-size: 30px;
      align-items: center;
    }

    .both-chessman {
      display: flex;
      align-items: center;
      width: 150px;
      justify-content: space-between;
    }

    .chessman {
      display: flex;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: black;
      border: 1px solid #fff;
    }

    .chessman.white {
      background: #fff;
      border: 1px solid #000;
    }
  </style>
  <div class="weiqi-warp">
    <div id="weiqidom"></div>
    <div class="weiqi-op">
      <div class="header">
        房间-0314
        <div class="state_tag" id="status">白中盘胜</div>
      </div>
      <div class="user-list">
        <div>
          <div class="user-item">
            <div class="user-img h" id="user-h"></div>
            <div class="user-room-info">
              <div class="time">时间: 00:00:27</div>
              <div class="read-time">读秒: 30s 1次</div>
              <div class="eat-number">提子: 提2子</div>
              <div id="user-status-H">状态：掉线</div>
            </div>
          </div>
        </div>
        <div class="vs-img">
          <img style="width: 100%;height: 100%;" src="../../images/vs.png" alt="">
        </div>
        <div>
          <div class="user-item">
            <div class="user-img" id="user-b"></div>
            <div class="user-room-info">
              <div class="time">时间: 00:00:27</div>
              <div class="read-time">读秒: 30s 1次</div>
              <div class="eat-number">提子: 提2子</div>
              <div id="user-status-B">状态：掉线</div>
            </div>
          </div>
        </div>
      </div>
      <div class="slider-wrap">
        <div class="progerss"></div>
      </div>
      <div class="op-btn">
        <div class="btn btn-start">始</div>
        <div class="btn">退</div>
        <span class="step-num">第114手</span>
        <div class="btn">进</div>
        <div class="btn btn-end">末</div>
      </div>

      <div class="wei-btn">
        <div id="ready" class="start-btn">开始</div>
        <div id="end" class="start-btn">申请点目</div>
      </div>
    </div>
  </div>

  <script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.dev.js"></script>
  <script src="../../weiqi.js"></script>
  <script src="../../res/layui/layui.js"></script>
  <script>
    layui.config({
      version: "3.0.0",
      base: '../../res/mods/'
    }).use(['utils', 'ajax', 'layer'], function () {
      var $ = layui.$;
      var utils = layui.utils;
      var ajax = layui.ajax;
      var layer = layui.layer;
      var socket = io.connect(window.location.origin);
      var otherTime = 0;
      var myTime = 0;
      var blackUser;


      var roomid = utils.getParams('roomid');
      var type = null;
      var roomStatusMap = {
        10: '已创建',
        20: '等待中',
        30: '已就坐',
        40: '已开始',
        50: '已结束'
      };

      function keepAlive() {
        socket.emit("setkeepAlive", 0);
      }

      socket.on("getkeepAlive", msg => {
        console.log(msg);
        var username = msg.username;
        var time = msg.time;

        var myName = window.sessionStorage.getItem('username');
        if (myName != username) {
          otherTime = time;
        }
      });

      function getOtherType() {
        if (type == 'B') {
          return 'H';
        } else if (type == 'H') {
          return 'B';
        } else {
          return '';
        }
      }

      function setMyState(msg) {
        $("#user-status-" + type).text('状态：在线');
        $('#user-status-' + getOtherType()).text('状态：' + msg)
      }

      function otherIsLink() {
        var now = Date.now();
        if ((now - otherTime) / 1000 > 10) {
          setMyState('掉线');
          console.log('掉线')
        } else {
          setMyState('在线');
          console.log('在线')
        }
      }

      setInterval(function () {
        keepAlive();
        otherIsLink();
      }, 5000);

      ajax({
        url: '/room/getRoomById',
        data: {
          roomid: roomid
        },
        method: 'get',
        success: function (res) {
          console.log(res);
          initWeiqi(res);
        }
      });

      $("#ready").click(function () {
        ajax({
          url: '/room/ready',
          data: {
            type: type,
            roomid: roomid
          },
          success: function (res) {
            ajax({
              url: '/room/getRoomById',
              data: {
                roomid: roomid
              },
              method: 'get',
              success: function (data) {
                // initWeiqi(res);
                console.log(data);
                window.location.reload();
              }
            });
          }
        });
      });

      function putStep(chessman, fn) {
        ajax({
          url: '/room/addStep',
          data: {
            x: chessman.x,
            y: chessman.y,
            type: chessman.type,
            roomid: roomid
          },
          success: function (res) {
            fn(res)
          }
        });
      }

      function renderStep(weiqi) {
        ajax({
          url: '/room/getSteps',
          data: {
            roomid: roomid
          },
          success: function (steps) {
            steps.forEach(function (step) {
              weiqi.readStep(step.x, step.y, step.type, false);
            });
          }
        });
      }
      var isRunning = false;
      function initWeiqi(res) {
        var chessSize = res.chessSize;
        blackUser = res.blackUser;
        var blackName = res.blackName;
        var whiteName = res.whiteName;
        var roomStatus = res.roomStatus;
        type = res.type;
        $("#user-h").html(blackName);
        $("#user-b").html(whiteName);
        $("#status").html(roomStatusMap[roomStatus]);
        if (roomStatus == 40) {
          $("#ready").hide();
          $("#end").show();
        }

        if (!type && blackName && !whiteName) {
          type = 'B';
        }
        if (!type && !blackName && whiteName) {
          type = 'H';
        }

        var weiqi = new WeiQi(weiqidom);
        weiqi.changeRoadNum(chessSize);
        weiqi.onPut(function (chessman, next) {
          if (roomStatus == 40 && !isRunning) {
            chessman.type = type;
            isRunning = true;
            putStep(chessman, function (flag) {
              isRunning = false;
              if (flag) {
                next();
                socket.emit("sentToServer", chessman);
              } else {
                layer.alert('对方下棋');
              }
            });
          }
        });

        socket.on("sendToClient", msg => {
          if (type != msg.type) {
            weiqi.readStep(msg.x, msg.y, msg.type, true);
          }
        });

        weiqi.setMusic({
          go: "/video/go.wav",
          eat: "/video/eat.wav"
        });
        renderStep(weiqi);
      }
    });
  </script>

</body>

</html>